<template>
    <div id="bartab">
        <ul>
            <li v-for="i in task" :class="{ gif: i.gif , active: i.inx == bartabInx}">
                <router-link :to="i.to" v-if="!i.gif">
                    <div class="bartab-box"><img :src="i.url"></div>
                    <p>{{ i.text }}</p>
                </router-link>
                <a v-else :href="i.to">
                    <div class="bartab-box"><img :src="i.url"></div>
                    <p>{{ i.text }}</p>
                </a>
            </li>
        </ul>
    </div>
</template>


<script>
    export default {
        name: 'bartab',
        data() {
            return {
                task: [
                    {
                        url: require('@/images/bartab-1a.png'),
                        text: '任务大厅',
                        to: '/',
                        inx: 1
                    },
                    {
                        url: require('@/images/bartab-2a.png'),
                        text: '我的任务',
                        to: '/task/my_tasks',
                        inx: 2
                    },
                    {
                        url: require('@/images/logoGif.gif'),
                        text: '热门活动',
                        to: localStorage.getItem('activity') + '?token=' + localStorage.getItem('token') + '&game=1',
                        gif: true,
                    },
                    {
                        url: require('@/images/bartab-3a.png'),
                        text: '个人中心',
                        to: '/task/Myself',
                        inx: 4
                    }
                ],
                bartabInx: localStorage.getItem('bartabInx')
            }
        },
    }
</script>

<style>
    #bartab {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 99;
        height: 1.5rem;
        background: #fff;
    }

    #bartab ul {
        display: flex;
    }

    #bartab ul li {
        flex: 1;
        text-align: center;
        position: relative;
        padding-top: .3rem;
    }

    #bartab ul li p {
        margin-top: .1rem;
        font-size: .4rem;
        color: #BCBCBC;
    }

    #bartab ul li.active p {
        color: #5AACFE
    }
    #bartab ul li.active img {
        filter: none
    }
    #bartab ul li img {
        display: block;
        height: .5rem;
        margin: 0 auto;
        filter:grayscale(100%);
    }
    #bartab ul li.gif img {
        width: .8rem;
        height: auto;
        top: -0.3rem;
        left: .9rem;
        filter: none;
        position: absolute;
    }
    #bartab ul li.gif p {
        color: #FC6A5B;
    }
    .bartab-box {
        height: .5rem;
    }
</style>
